<template>
  <div class="alarmContent">
    <div class="alarmContent-pie">
      <div class="alarmContent-pie__data">
        <div class="alarmContent-pie__data__sum">
          <p>告警总数：10</p>
        </div>
        <i class="alarmContent-pie__data__separation"></i>
        <ul class="alarmContent-pie__data__type">
          <li>
            <p>已处理</p>
            <b>5</b>
          </li>
          <li>
            <p>未处理</p>
            <b>5</b>
          </li>
        </ul>
      </div>
      <div class="alarmContent-pie__chart">
        <chart-view
          :chart-option="alarmHandlingPie"
          :auto-resize="true"
          height="100%"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { alarmHandlingData } from "../../../temp/alarmHandlingData";
export default {
  name: "AlarmHandling_o",
  data() {
    return {
      alarmHandling: alarmHandlingData,
      alarmHandlingPie: {},
    };
  },
  /**所有方法*/
  methods: {},
  created() {
    this.alarmHandlingPie = this.$eChartFn.smooth(this.alarmHandling);
  },
};
</script>
<style scoped lang='less'>
.alarmContent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.alarmContent-pie {
  width: 80%;
  height: 80%;
  position: relative;

  &__data {
    width: 50%;
    height: 30%;
    position: absolute;
    z-index: 2;
    right: 0;

    &__sum {
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
    }

    &__separation {
      margin: 0.5vh 0;
      display: block;
      width: 100%;
      height: 2px;
      background: linear-gradient(
        90deg,
        rgba(101, 174, 238, 1),
        rgba(101, 174, 238, 0)
      );
      box-shadow: 0px 0px 4px 0px rgba(31, 132, 222, 0.3);
    }

    &__type {
      display: flex;
      justify-content: space-between;

      li {
        display: flex;
        justify-content: space-between;
        width: 40%;

        p {
          font-size: 12px;
          font-weight: 500;
          color: #78879b;
          line-height: 11px;
        }

        b {
          font-size: 12px;
          font-weight: 500;
          color: #ffffff;
          line-height: 11px;
        }
      }
    }
  }

  &__chart {
    width: 100%;
    height: 100%;
  }
}
</style>
